/* eslint-disable max-len */
<template>
  <div id="components-layout-demo-basic">
    <a-layout>
      <!-- 头部 标题和搜索部分 -->
      <a-layout-header class="td-header">
        <h3 class="td-header-text">ToDoList</h3>
          <a-input-search
            placeholder="input and keypress the enter or click the add button"
            @search="onAdd"
            enterButton="add"
            size="large"
            defaultValue=""
            class="td-input"/>
      </a-layout-header>
      <!-- 事项展示部分 -->
      <a-layout-content class="td-main">
        <!-- 正在进行事项部分 -->
        <div class="td-doing">
          <a-row class="title-row">
            <a-col :span="8">
              <span class="doing-title">
                doing
              </span>
            </a-col>
            <a-col :span="12"></a-col>
            <a-col :span="4">
              <span class="count-num">{{todos?todos.length:0}}</span>
            </a-col>
          </a-row>
          <transition>
            <list-item :todos=todos></list-item>
          </transition>
        </div>
        <!-- 已经完成事项部分 -->
        <div class="td-done">
          <a-row class="title-row">
            <a-col :span="8" >
              <span class="done-title">
                finished
              </span>
            </a-col>
            <a-col :span="12"></a-col>
            <a-col :span="4">
              <span class="count-num">{{dones?dones.length:0}}</span>
              </a-col>
          </a-row>
          <a-row class="done-item item-common" v-for="(item) in dones" :key="item">
            <a-col :span="3" class="h-3">
              <a-checkbox
                @change="onDoneChange(item)"
                :defaultChecked="true"
                class="check-icon"></a-checkbox>
            </a-col>
            <a-col :span="17" class="h-3">{{item}}</a-col>
            <a-col :span="4" class="delete-icon-outer">
            <a-icon
              @click="deleteDoneItem(item)"
              class="delete-icon h-3"
              type="close-circle" /></a-col>
          </a-row>
        </div>
      </a-layout-content>
      <!-- 底部 -->
      <a-layout-footer class="td-footer">Design By Kenanyah</a-layout-footer>
    </a-layout>
  </div>
</template>
<script>
import { Layout } from 'ant-design-vue';
import util from '../assets/js/storage';
import ListItem from './ListItem.vue';

export default {
  components: {
    ALayout: Layout,
    ListItem,
  },
  data() {
    return {
      inputVal: '',
      todos: ['two', 'one'], // 保存制定未完成事项
      dones: ['five', 'four', 'three'], // 保存已经完成事项
      tempVal: '', // 用于修改文本时候的临时变量
    };
  },
  methods: {
    // 点击修改事项区域
    handleFocus($event) {
      const tempVal = $event.target.innerText;
      this.tempVal = tempVal; // 点击文本处，将文本信息保存在vm实例上的tempVal临时变量上
    },
    // 点击修改区域之后，点击其他区域触发失焦事件
    handleBlur(e) {
      const newContent = e.target.innerText; // 将新的文本用newContent保存
      const index = this.todos.indexOf(this.tempVal); // 找到未修改之前文本在数组中的位置
      if (this.todos.includes(newContent)) {
        if (newContent !== this.tempVal) {
          this.$message.info('该任务已存在');
          return;
        }
        return;
      }
      if (newContent !== this.tempVal) {
        this.todos[index] = newContent;
        this.storeSet();
      }
      // 此处需要添加forceUpdate，让v-for上的数据更新
      this.$forceUpdate();
    },
    // 新增事项
    onAdd(value) {
      // eslint-disable-next-line no-param-reassign
      value = value.trim(); // 去掉输入的值的首位空格
      if (this.todos.includes(value)) {
        this.$message.info('该任务已存在');
      } else if (value.trim() === '') {
        this.$message.info('您并未添加待办事项');
      } else {
        this.todos.unshift(value);
      }
    },
    // 事项从doing（待办）到finished列表中
    onDoingChange(item) {
      const todo = this.todos;
      const done = this.dones;
      todo.splice(todo.indexOf(item), 1);
      done.unshift(item);
    },
    // 事项从finished到doing（待办）列表中
    onDoneChange(item) {
      const todo = this.todos;
      const done = this.dones;
      if (todo.includes(item)) {
        this.$message.info('该任务已存在');
        return;
      }
      done.splice(done.indexOf(item), 1);
      todo.unshift(item);
    },
    // 未完成列表中删除事项
    deleteDoingItem(value) {
      const todo = this.todos;
      todo.splice(todo.indexOf(value), 1);
    },
    // 完成列表中删除事项
    deleteDoneItem(value) {
      const arr = this.dones;
      arr.splice(arr.indexOf(value), 1);
    },
    // 文本点击修改
    editChange(val) {
      // eslint-disable-next-line no-console
      console.log(val);
    },
    // 封装本地存储函数set
    storeSet() {
      util.StorageSetter('doings', this.todos);
      util.StorageSetter('finishes', this.dones);
    },
    // 封装本地存储函数get
    storeGet() {
      this.todos = util.StorageGetter('doings');
      this.dones = util.StorageGetter('finishes');
    },
  },
  // 加载data后获取本地存储数据
  created() {
    this.storeGet();
  },
  // 在该钩子函数 更新本地储存
  beforeUpdate() {
    this.storeSet();
  },
};
</script>
